<template>
    <div>
        <div class="cat-img">
            <div class="mask">
                <span>{{currentCat}}</span>
            </div>
            <img src="../assets/img/1e9da84b53ea4898ba859175609ac6bd.jpeg" alt="">
        </div>

        <div class="cat-list" v-if="currentData != null">
            <div :key="index" v-for="(item, index) in currentData" @click="priveseJump(item)" class="list-item">
                <div class="item-dt">
                    <img v-lazy="`http://47.105.157.158:3000/images/video/${item.imgs}`">
                    <span>{{item.times}}</span>
                </div>
                <div class="item-dd">
                    <div class="dd-title">{{item.names}}</div>
                    <div class="dd-cz">
                        <i class="iconfont dianzan">&#xe73f;</i>
                        <span>{{item.dianzan}}</span>
                        <i class="iconfont liuyan">&#xe61e;</i>
                        <span>{{item.comments.length}}</span>
                    </div>
                </div>
            </div>


        </div>
    </div>
</template>

<script>
import aixos from 'axios';
import { onMounted, ref } from '@vue/composition-api';
import Axios from 'axios';
export default {
    setup(props, context) {

        aixos.defaults.baseURL = 'http://47.105.157.158:3000';

        onMounted(() => {
            currentCat.value = context.parent.$route.params.id;
            context.parent.$nextTick(() => {
                getCurrentData(currentCat.value);
            })
        })

        // 当前分类
        const currentCat = ref('音MAD');
        // 当前分类数据
        const currentData = ref(null);
        // 根据分类获取视频
        const getCurrentData = async function (cat) {
            let { data: res } = await aixos.get(`/video/video/data/${cat}`);
            if (res.status != 200)
                return context.parent.$message.error('获取分类数据失败，请刷新后重试');
            currentData.value = res.data;
        }

        

        // 跳转到详情
        const priveseJump = function (item) {
            context.parent.$store.commit('setVideoData', item);
            context.parent.$router.push(`/privese/${item.names}`);
        }

        const methods = { priveseJump }
        return {
            ...methods,
            currentData,
            currentCat
        }
    }
}
</script>

<style lang="less" scoped>
.cat-img {
    position: relative;
    overflow: hidden;
    height: 6.666667rem;
    .mask {
        span {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.333333rem;
            font-weight: 700;
            color: #fff;
        }
    }
}

.cat-list {
    margin-top: 2rem;
}

.list-item {
    border-bottom: .266667rem solid #f7f8f9;
    padding-bottom: .266667rem;
    .item-dd {
        padding: 0 .533333rem;
        .dd-title {
            height: 1.866667rem;
            line-height: 1.866667rem;
            font-size: .666667rem;
            color: #333;
        }
        .dd-cz {
            span {
                font-size: .666667rem;
                margin: 0 .4rem;
            }
            .liuyan {
                margin-left: .266667rem;
            }
        }
    }
    .item-dt {
        position: relative;
        span {
            position: absolute;
            right: .133333rem;
            top: .133333rem;
            padding: .133333rem .266667rem;
            background-color: rgba(0, 0, 0, .4);
            color: #b1bfce;
            font-weight: 700;
            letter-spacing: .053333rem;
            border-radius: .266667rem;
            font-size: .8rem;
        }
    }
}
</style>